<template>
  <div class="weather">
    <div>
      <span class="weather-type">PM<i>2.5</i><i>(μg/m³)</i></span>
      <span class="weather-value">22<i class="el-icon-top" /></span>
      <img src="../../assets/images/pm-img.png" alt="">
    </div>
    <div>
      <span class="weather-type">温度</span>
      <span class="weather-value">35℃<i class="el-icon-bottom" /></span>
      <img src="../../assets/images/temp-img.png" alt="">
    </div>
    <div>
      <span class="weather-type">风向</span>
      <!-- <i class="el-icon-s-marketing"></i> -->
      <svg-icon class="svgClass" icon-class="wind" />
      <span>东南风</span>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {

    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
.weather{
  margin-top:24px;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  width:100%;
  height:69px;
  height:7.2% !important;
  background:rgba(255,255,255,0.05);
  border-left:6px solid rgba(99,245,245,1);
  >div{
    height:100%;
    display:flex;
    justify-content: space-around;
    align-items:center;
    align-content: center;
    >span{
      height:40px;
      line-height:40px;
      position:relative;
    }
    >span.weather-type{
      @include fontSizeRem(30);
      font-weight:400;
      color:rgba(99,245,245,1);
      i:nth-of-type(1){
        position: absolute;
        top:25%;
        right:-22.9%;
        width:22.9%;
        @include fontSizeRem(8);
        font-weight:300;
        line-height:10px;
        color:rgba(99,245,245,1);
      }
      i:nth-of-type(2){
        position:absolute;
        width:77%;
        right:-77%;
        bottom:0;
        @include fontSizeRem(10);
        font-weight:400;
        line-height:14px;
        color:rgba(79,86,94,1);
      }
    }
    >span.weather-value{
      width:10.6%;
      @include fontSizeRem(30);
      font-weight:400;
      line-height:40px;
      color:rgba(255,255,255,1);
      >i{
        position:absolute;
        top:0;
        right:-14px;
        font-weight:bold;
        color:rgba(226,76,92,1);
        @include fontSizeRem(12)
      }
    }
    img{
      width:45.2%;
      height:88%;
      align-self:flex-end;
    }
    &:first-of-type{
      width:37%;
      >span:first-of-type{
        width:14.2%;
      }
    }
    &:nth-of-type(2){
      width:37%;
      >span:first-of-type{
        width:19%;
      }
      >span.weather-value{
        width:18.9%;
        >i{
          color:rgba(99,245,245,1);
        }
      }
    }
    &:nth-of-type(3){
      width:26%;
      >span:first-of-type{
        width:26.5%;
      }
      >span.weather-value{
        height:30px;
        background:rgba(99,245,245,1)
      }
      >.svgClass{
        width:changePxToRem(30) !important;
        height:changePxToRem(30) !important;
        line-height:40px;
        vertical-align:middle;
        fill:rgba(99,245,245,1) !important;
      }
      >span:last-of-type{
        @include fontSizeRem(30);
        line-height:40px;
        color:rgba(255,255,255,1);
        vertical-align:middle;
      }
    }
  }
}
@media screen and (max-height: 937px){
  .weather{
    margin-top:21px;
    height:52px;
    >div{
      line-height:52px;
      >span.weather-type{
        @include fontSizeRem(27);
      }
      >span.weather-value{
        @include fontSizeRem(27);
      }
      &:nth-of-type(3){
        >i{
          @include fontSizeRem(27);
        }
        >span:last-of-type{
          @include fontSizeRem(27);
        }
      }
    }
  }
}
@media screen and (max-height:768px){
  .weather{
    margin-top:15px;
    height:35px;
    >div{
      >span{
        height:26px;
        line-height:26px;
      }
      >span.weather-type{
        @include fontSizeRem(20);
        i:nth-of-type(1){
          line-height:8px;
        }
        i:nth-of-type(2){
          @include fontSizeRem(8);
          bottom:-2px;
        }
      }
      >span.weather-value{
        width:23%;
        text-align:right;
        @include fontSizeRem(20);
        line-height:26px;
      }
      &:nth-of-type(3){
        >.svgClass{
          width:changePxToRem(20) !important;
          height:changePxToRem(20) !important;
          line-height:26px;
        }
        >span:last-of-type{
          @include fontSizeRem(20);
          line-height:26px;
        }
      }

    }
  }
}
@media screen and (max-width:1366px){

}
</style>
